<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/clear.css">
  <link rel="stylesheet" href="./css/app.css">
  <link rel="stylesheet" href="./css/animate.css">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<style>

</style>

<body>
  <div id="app">
    <transition enter-active-class="animate bounceIn" leave-active-class="animate bounceOut">
      <tip v-if="isTip">
        <p style="color:green;" v-if="isSucceed">LOGIN SUCCEED!</p>
        <p style="color:brown;" v-else>LOGIN ERROR!</p>
      </tip>
    </transition>
    <transiton name="fade" mode="out-in">
      <login @emitloginresult="handleLoginResult"> </login>
    </transiton>
  </div>

  <!-- 登录页面的模板 -->
  <template id="loginTmp">
    <main id="login-box">
      <p>LOGIN PAGE</p>
      <section id="login-container">
        <div class="login-line">
          <div class="login-label">账 户:</div>
          <div class="login-input"><input type="text" placeholder="请输入账户名" v-model="username"></div>
        </div>
        <div class="login-line">
          <div class="login-label">密 码:</div>
          <div class="login-input"><input type="password" placeholder="请输入密码" v-model="password"></div>
        </div>
        <div class="login-line"> <button @click="login">LOGIN </button></div>
        <a href="#" @click="componentName = registerTmp" href="javascript;">没有账号？立即注册</a>
      </section>
    </main>
  </template>


  <!-- 注册页面的模板 -->
  <template id="registerTmp">
    <main id="register-box">
      <p>REGISTER PAGE</p>
      <section id="register-container">
        <div class="login-line">
          <div class="login-label">账 户:</div>
          <div class="login-input"><input type="text" placeholder="请输入账户名" v-model="username"></div>
        </div>
        <div class="login-line">
          <div class="login-label">密 码:</div>
          <div class="login-input"><input type="password" placeholder="请输入密码" v-model="password"></div>
        </div>
        <div class="login-line"> <button @click="login">REGISTER </button></div>
      </section>
    </main>
  </template>

  <!-- 提示框模板 -->
  <template id="tipTmp">
    <main id="tip-box">
      <div class="tip-head">
        <div class="tip-icon">
          <image src="./images/tip.png" style="width: 100%;
          height: 100%;"></image>
        </div>
        <div class="tip-title">温馨提示</div>
      </div>
      <div class="tip-container">
        <slot></slot>
      </div>
    </main>
  </template>
  <script src="./js/app.js"></script>
</body>

</html>